<template>
  <div class="container">
    <van-nav-bar title="短信配置" fixed @click-left="onClickLeft">
      <van-icon name="arrow-left" slot="left" color="#333" size="0.6rem" />
    </van-nav-bar>
    <div class="box_added">
      <p class="tit">下单短信通知</p>
      <div class="checkSteper">
        <ul>
          <li
            :class="checkArr.filter(item => item == '均不通知').length ? 'active' : ''"
            @click="onclick('均不通知')"
          >均不通知</li>
          <li
            :class="checkArr.filter(item => item == '通知发货人').length? 'active' : ''"
            @click="onclick('通知发货人')"
          >通知发货人</li>
          <li
            :class="checkArr.filter(item => item == '通知收货人').length? 'active' : ''"
            @click="onclick('通知收货人')"
          >通知收货人</li>
        </ul>
      </div>
    </div>
    <div class="box_added">
      <p class="tit">提货短信通知</p>
      <div class="checkSteper">
        <ul>
          <li
            :class="checkArrT.filter(item => item == '均不通知').length ? 'active' : ''"
            @click="onclickT('均不通知')"
          >均不通知</li>
          <li
            :class="checkArrT.filter(item => item == '通知发货人').length? 'active' : ''"
            @click="onclickT('通知发货人')"
          >通知发货人</li>
          <li
            :class="checkArrT.filter(item => item == '通知收货人').length? 'active' : ''"
            @click="onclickT('通知收货人')"
          >通知收货人</li>
        </ul>
      </div>
    </div>
    <div class="box_added">
      <p class="tit">签收短信通知</p>
      <div class="checkSteper">
        <ul>
          <li
            :class="checkArrW.filter(item => item == '均不通知').length ? 'active' : ''"
            @click="onclickW('均不通知')"
          >均不通知</li>
          <li
            :class="checkArrW.filter(item => item == '通知发货人').length? 'active' : ''"
            @click="onclickW('通知发货人')"
          >通知发货人</li>
          <li
            :class="checkArrW.filter(item => item == '通知收货人').length? 'active' : ''"
            @click="onclickW('通知收货人')"
          >通知收货人</li>
        </ul>
      </div>
    </div>
    <div class="buton">
      <van-button class="butonT" type="primary" @click="onOK" size="large">确定</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkArr: ['均不通知'],
      checkArrT: ['均不通知'],
      checkArrW: ['通知收货人'],
      query:{}
    };
  },
  created() {
    this.query = this.$router.history.current.query;
    if (JSON.parse(sessionStorage.getItem("message"))) {
      let message = JSON.parse(sessionStorage.getItem("message"));
      if (message.orderSmsStatus == 0) {
        this.checkArr = ["均不通知"];
      } else if (message.orderSmsStatus == 1) {
        this.checkArr = ["通知发货人"];
      } else if (message.orderSmsStatus == 2) {
        this.checkArr = ["通知收货人"];
      } else if (message.orderSmsStatus == 3) {
        this.checkArr = ["通知发货人", "通知收货人"];
      }

      if (message.pickSmsStatus == 0) {
        this.checkArrT = ["均不通知"];
      } else if (message.pickSmsStatus == 1) {
        this.checkArrT = ["通知发货人"];
      } else if (message.pickSmsStatus == 2) {
        this.checkArrT = ["通知收货人"];
      } else if (message.pickSmsStatus == 3) {
        this.checkArrT = ["通知发货人", "通知收货人"];
      }

      if (message.signSmsStatus == 0) {
        this.checkArrW = ["均不通知"];
      } else if (message.signSmsStatus == 1) {
        this.checkArrW = ["通知发货人"];
      } else if (message.signSmsStatus == 2) {
        this.checkArrW = ["通知收货人"];
      } else if (message.signSmsStatus == 3) {
        this.checkArrW = ["通知发货人", "通知收货人"];
      }
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onclick(val) {
      if (val == "均不通知") {
        let Arr = this.checkArr.filter(item => item == val);
        if (!Arr.length) {
          this.checkArr = ["均不通知"];
        } else {
          this.checkArr = [];
        }
      } else {
        let Arr = this.checkArr.filter(item => item == val);
        if (!Arr.length) {
          this.checkArr.push(val);
          this.checkArr.forEach((item, i) => {
            if (item == "均不通知") {
              this.checkArr.splice(i, 1);
            }
          });
        } else {
          this.checkArr.forEach((item, i) => {
            if (item == val) {
              this.checkArr.splice(i, 1);
            }
          });
        }
      }
    },
    onclickT(val) {
      if (val == "均不通知") {
        let Arr = this.checkArrT.filter(item => item == val);
        if (!Arr.length) {
          this.checkArrT = ["均不通知"];
        } else {
          this.checkArrT = [];
        }
      } else {
        let Arr = this.checkArrT.filter(item => item == val);
        if (!Arr.length) {
          this.checkArrT.push(val);
          this.checkArrT.forEach((item, i) => {
            if (item == "均不通知") {
              this.checkArrT.splice(i, 1);
            }
          });
        } else {
          this.checkArrT.forEach((item, i) => {
            if (item == val) {
              this.checkArrT.splice(i, 1);
            }
          });
        }
      }
    },
    onclickW(val) {
      if (val == "均不通知") {
        let Arr = this.checkArrW.filter(item => item == val);
        if (!Arr.length) {
          this.checkArrW = ["均不通知"];
        } else {
          this.checkArrW = [];
        }
      } else {
        let Arr = this.checkArrW.filter(item => item == val);
        if (!Arr.length) {
          this.checkArrW.push(val);
          this.checkArrW.forEach((item, i) => {
            if (item == "均不通知") {
              this.checkArrW.splice(i, 1);
            }
          });
        } else {
          this.checkArrW.forEach((item, i) => {
            if (item == val) {
              this.checkArrW.splice(i, 1);
            }
          });
        }
      }
    },
    onOK() {
      let medalTit = "";
      let orderSmsStatus;
      // 下单短信通知配置逻辑
      console.log(this.checkArr.filter(item => item == "均不通知"));
      if (this.checkArr.filter(item => item == "均不通知").length) {
        orderSmsStatus = 0;
        medalTit = "下单短信：均不通知;";
      } else if (
        this.checkArr.filter(item => item == "通知发货人").length &&
        this.checkArr.filter(item => item == "通知收货人").length
      ) {
        medalTit = "下单短信：通知发货人、通知收货人;";
        orderSmsStatus = 3;
      } else if (this.checkArr.filter(item => item == "通知发货人").length) {
        medalTit = "下单短信：通知收货人;";
        orderSmsStatus = 1;
      } else if (this.checkArr.filter(item => item == "通知收货人").length) {
        medalTit = "下单短信：通知收货人;";
        orderSmsStatus = 2;
      }

      let pickSmsStatus;
      // 提货短信通知配置逻辑
      if (this.checkArrT.filter(item => item == "均不通知").length) {
        medalTit += "提货短信：均不通知;";
        pickSmsStatus = 0;
      } else if (
        this.checkArrT.filter(item => item == "通知发货人").length &&
        this.checkArrT.filter(item => item == "通知收货人").length
      ) {
        medalTit += "提货短信：通知发货人、通知收货人;";
        pickSmsStatus = 3;
      } else if (this.checkArrT.filter(item => item == "通知发货人").length) {
        medalTit += "提货短信：通知发货人;";
        pickSmsStatus = 1;
      } else if (this.checkArrT.filter(item => item == "通知收货人").length) {
        medalTit += "提货短信：通知收货人;";
        pickSmsStatus = 2;
      }

      let signSmsStatus;
      // 签收短信通知配置逻辑
      if (this.checkArrW.filter(item => item == "均不通知").length) {
        medalTit += "签收短信：均不通知;";
        signSmsStatus = 0;
      } else if (
        this.checkArrW.filter(item => item == "通知发货人").length &&
        this.checkArrW.filter(item => item == "通知收货人").length
      ) {
        medalTit += "签收短信：通知发货人、通知收货人;";
        signSmsStatus = 3;
      } else if (this.checkArrW.filter(item => item == "通知发货人").length) {
        medalTit += "签收短信：通知发货人;";
        signSmsStatus = 1;
      } else if (this.checkArrW.filter(item => item == "通知收货人").length) {
        medalTit += "签收短信：通知收货人;";
        signSmsStatus = 2;
      }
      if (!orderSmsStatus && !pickSmsStatus && !signSmsStatus) {
        medalTit = "均不通知";
      }
      let list = {
        orderSmsStatus: orderSmsStatus,
        pickSmsStatus: pickSmsStatus,
        signSmsStatus: signSmsStatus,
        medalTit: medalTit
      };
      sessionStorage.setItem("message", JSON.stringify(list));
      this.$router.push({
          path: "/addList",
          query: this.query
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 46px 0 67px 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-size: 15px;
}
.box_added {
  padding: 10px;
  box-sizing: border-box;
  background: #fff;
  margin-top: 10px;
  .tit {
    padding-bottom: 5px;
    box-sizing: border-box;
    line-height: 32px;
  }
  .checkSteper {
    padding: 15px 10px;
    box-sizing: border-box;
    font-size: 15px;
    background: #fff;
    box-sizing: border-box;
    ul {
      display: flex;
      li {
        border: 1px solid #f3f3f3;
        color: #666666;
        width: 100px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        margin-right: 18px;
        background: #f3f3f3;
        border-radius: 4px;
      }
      .active {
        border: 0.5px solid #f18d00;
        color: #f18d00;
        background: #fffaf2;
      }
    }
  }
}
.buton {
  padding: 8px 8px;
  box-sizing: border-box;
  display: flex;
  border-radius: 5px;
  justify-content: space-around;
  background: #fff;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  .butonT {
    background: #f18d00;
    width: 328px;
    height: 44px;
    border-radius: 5px;
    border: 1px solid #f18d00;
  }
}
</style>